import React from 'react';
import ReactDOM from 'react-dom';
require("./log.css");

// 登录注册Log.js里面用到的注册组件
class RegisterForm extends React.Component{

    constructor() {
        super();
        this.state={
            user : [],
            userID:'',
            userPwd:''
        };
    }

    // 如果该用户的身份证已经存在在数据库中，说明该用户已注册过，有职信号，注册失败，返回“ responseText.user_id == 'fail' ”，
    // 反之，返回该用户的名字和职信号，弹出提示框。
    getUserID(responseText){
        if(responseText.user_id == 'fail'){
            alert("您已有职信账号，请勿重复注册！");
            ReactDOM.findDOMNode(this.refs.registerForm).reset();
        }else{
            alert(responseText.user_name+"您好，您已成功注册，职信号为："+responseText.user_id+"，请牢记！此后都将用职信号来登录职信系统！进入系统请重新登录。");
        }
    }

    // 首先同样判断表单是否填写完全，如果填写完全，则直接提交到tuser，接受返回来的json数据，并执行getUserID(responseText)来判断是否注册成功
    handleSubmit(e){
        e.preventDefault();
        const register_username = ReactDOM.findDOMNode(this.refs.registerUsername).value.trim();
        const register_userID = ReactDOM.findDOMNode(this.refs.registerUserID).value.trim();
        const register_phone = ReactDOM.findDOMNode(this.refs.registerPhone).value.trim();
        const register_pwd = ReactDOM.findDOMNode(this.refs.registerPwd).value.trim();
        const register_rePwd = ReactDOM.findDOMNode(this.refs.registerRePwd).value.trim();
        const register_form = ReactDOM.findDOMNode(this.refs.registerForm);

        console.log("该用户注册的真实姓名为："+register_username);
        console.log("该用户注册的身份证为："+register_userID);
        console.log("该用户注册的手机号码为："+register_phone);
        console.log("该用户注册的密码为："+register_pwd);
        console.log("该用户注册的确认密码为："+register_rePwd);

        if(register_username === "" || register_username === null){
            alert("请输入您的真实姓名");
            console.log("该用户注册失败");
            console.log("-----------------------------------------");
        }else if(register_userID === "" || register_userID === null){
            alert("请输入您的身份证");
            console.log("该用户注册失败");
            console.log("-----------------------------------------");
        }else if(register_phone === "" || register_phone === null){
            alert("请输入您的手机号码");
            console.log("该用户注册失败");
        }else if(register_pwd === "" || register_pwd === null){
            alert("请您设置密码");
            console.log("该用户注册失败");
            console.log("-----------------------------------------");
        }else if(register_rePwd === "" || register_rePwd === null){
            alert("请再次输入设置的密码");
            console.log("该用户注册失败");
            console.log("-----------------------------------------");
        }else if(register_pwd !== register_rePwd){
            register_form.reset();
            alert("两次输入的密码不同，请重新输入");
            console.log("该用户注册失败");
            console.log("-----------------------------------------");
        }else {
            fetch("http://121.196.202.247:1010/tuser/?format=json", {
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    "Content-Type": "application/json; charset=utf-8"
                },
                body: JSON.stringify({
                    user_name: register_username,
                    user_id_card: register_userID,
                    user_phone: register_phone,
                    user_password: register_pwd
                })
            }) .then((response) => response.json())
                .then((responseText) => {
                    this.getUserID(responseText);
                }).catch((error) => {alert("连接职信服务器失败，请查看网络连接状态并刷新页面！")});
        }
    }

    // 点击协议跳转新页面
    registerPolicy(){
        window.open('/#/policy', '_blank');
    }

    // 要渲染的组件，registerForm里面有submit注册，当点击注册就会执行handleSubmit(e)
    render() {
        return (
            <form ref="registerForm" onSubmit={function (e) {this.handleSubmit(e)}.bind(this)}>
                <p className="register_info"><span className="register_text">真实姓名：</span>
                    <input type="text" placeholder="请输入真实姓名" className="register_name" ref="registerUsername"/></p>
                <p className="register_info"><span className="register_text">身份证：&nbsp;&nbsp;&nbsp;</span>
                    <input type="text" placeholder="请输入身份证" className="register_id" ref="registerUserID"/></p>
                <p className="register_info"><span className="register_text">手机号：&nbsp;&nbsp;&nbsp;</span>
                    <input type="text" placeholder="请输入手机号" className="register_phone" ref="registerPhone"/></p>
                <p className="register_info"><span className="register_text">密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <input type="password" placeholder="请输入密码" className="register_pwd" ref="registerPwd"/></p>
                <p className="register_info"><span className="register_text">确认密码：</span>
                    <input type="password" placeholder="请再次输入密码" className="register_repwd" ref="registerRePwd"/></p>
                <p className="register_info"><span className="register_policy_text">点击「注册」按钮，即代表你同意<span className="register_policy" onClick={this.registerPolicy}>《职业信用网用户协议》</span></span></p>
                <p className="register_info"><input type="submit" value="注册" className="register_btn"/></p>
            </form>
        );
    }
}

export default RegisterForm;